@import '@/common/css/variables.less';

/* 转盘首页 */
.page-wheel{
	background-repeat: no-repeat;background-size: 100%;background-position: center top;color: #323232;background-color: #000;padding-bottom: 60rpx;
	.header{
		position: relative;min-height: 100rpx;
		.banner{display: block;width: 750rpx;}
		.broadcast{
			width:750rpx;height: 50rpx;position: absolute;left: 50%;top: 30rpx;transform: translateX(-50%);
			.swiper-broadcast{
				width:750rpx;height: 50rpx;background: linear-gradient(to right, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
				.item{
					width:750rpx; height: 50rpx;padding: 0 20rpx;margin: 0 auto; 
					.photo{width: 32rpx;height: 32rpx;border-radius: 50%;}
					.text{
						font-size: 22rpx;padding-left: 12rpx;line-height: 32rpx;
						text{padding-left: 10rpx;}
					}
				}
			}
		}
	}
	.wheel-box{
		width: 558rpx;height: 558rpx; position: relative;margin: 0 auto;
		.wheel-bg{display: block; width: 558rpx;height: 558rpx;}
		.wheel-deng{width: 558rpx;height: 558rpx;position: absolute;left: 50%;top: 0;transform: translateX(-50%);z-index: 1;}
		.wheel-zhen,.wheel-go{width: 261rpx;height: 261rpx;position: absolute;left: 50%;top: 156rpx;transform: translateX(-50%);}
		.wheel-zhen{z-index: 2;}
		.wheel-go{z-index: 3;}
	}
	.count{width:260rpx;margin: 50rpx auto 0;line-height: 52rpx;font-size: 22rpx; border-radius: 40rpx;background-color: rgba(255,255,255,.5);}
	.box{
		width: 700rpx;border-radius: 30rpx;background-color: #fff;margin: 22rpx auto;
		.title{font-size: 30rpx;text-align: center;padding: 30rpx 0;}
		.content{padding: 0 22rpx 50rpx 34rpx; font-size: 26rpx;line-height: 40rpx;}
		.rule{
			.rule-item{align-items: flex-start;padding-bottom: 20rpx;}
			.rule-index{width: 25rpx;line-height: 40rpx;}
			.rule-text{width: calc(100% - 25rpx);line-height: 40rpx;padding-left: 14rpx;}
		}
		.prize{
			.prize-item{
				padding: 13rpx 0;
				.circle{width: 10rpx;height: 10rpx;border-radius: 50%;background-color: #646464;}
				.number{text-align: right;}
				.con{flex:1;background: url(https://static.newbeaconhotels.com/app/hotel/line.png) repeat-x right center;background-size: 15rpx 3rpx;}
				.inner{display: inline-block; padding: 0 10rpx 0 26rpx;background-color: #fff;}
			}
		}
	}
}
.fix-btns{
	position: fixed;right: 0;top: 35rpx;z-index: 10;
	.btn{width: 120rpx;line-height: 42rpx;font-size: 20rpx;text-align: center; border-radius: 20rpx 0 0 20rpx; color: #323232;background-color: #fff;margin-bottom: 30rpx;}
}

/* 弹窗 */
.popup-box{
	width: 560rpx;background-color: #fff;border-radius: 30rpx;padding: 70rpx 50rpx 70rpx;
	.title{font-size: 34rpx;line-height: 34rpx; color: #1e1e1e;text-align: center;font-weight: bold;}
	.icon{display: block; width: 120rpx;height: 120rpx;margin: 0 auto 60rpx;}
	.content{
		&.content-record{
			padding-top: 60rpx;max-height: 600rpx;
			.line{height: 2rpx; background: linear-gradient(to right, transparent 0%, #e7e7e7 50%, transparent 100%);}
			.item{height: 120rpx;padding: 26rpx 30rpx;}
		}
		&.content-fail{
			.p1{padding-bottom: 20rpx;}
			.p2{line-height: 40rpx;}
		}
		&.content-success{
			padding-top: 20rpx;
			.image{display: block; max-width: 380rpx;margin: 50rpx auto 10rpx;}
		}
	}
	.btn{width: 300rpx;line-height: 80rpx;text-align: center; border-radius: 40rpx;background-color: @theme-color;font-size: 30rpx;color: #fff;margin: 50rpx auto 0;}
	.btns{
		width: 480rpx;
		.btn{
			width: 240rpx;
			&.l{border-radius: 40rpx 0 0 40rpx;background-color: @assist-color;}
			&.r{border-radius: 0 40rpx 40rpx 0;background-color: @theme-color;}
		}
	}
}
